import Vue from "vue";
import Particles from "@/assets/js/particles";

Vue.directive("particle", {
  inserted: (el, binding, vnode) => {
    console.log("inserted", vnode);
    const particles = new Particles(el, binding.value);
    let buttonVisible = true;

    const triggerEl = vnode.context.$refs[binding.arg];
    triggerEl &&
      triggerEl.addEventListener("click", () => {
        console.log(particles.isAnimating(), buttonVisible);
        if (!particles.isAnimating()) {
          if (buttonVisible) {
            particles.disintegrate();
            buttonVisible = false;
          } else {
            particles.integrate({
              duration: 800,
              easing: "easeOutSine"
            });
            buttonVisible = true;
          }
        }
      });
  }
});
